<ui:composition
               xmlns:ui="http://java.sun.com/jsf/facelets"
               xmlns:h="http://java.sun.com/jsf/html"
               xmlns:f="http://java.sun.com/jsf/core"
               xmlns:c="http://java.sun.com/jstl/core"
               xmlns:a4j="http://richfaces.org/a4j"
               xmlns:rich="http://richfaces.org/rich"
               xmlns:s="http://jboss.com/products/seam/taglib">



<div class="community-menu-container float-left third-width">
   <div class="community-menu-header"/>
   <div class="community-menu-main align-center">
      <br/>
      <h:form id="form">

         <rich:panelMenu style="width:200px" styleClass="align-center-margin" mode="ajax"
                         iconExpandedGroup="disc" iconCollapsedGroup="disc"
                         iconExpandedTopGroup="chevronUp" iconGroupTopPosition="right"
                         iconCollapsedTopGroup="chevronDown" iconCollapsedTopPosition="right"  itemClass="white" hoveredItemClass="blue">

            <rich:panelMenuGroup label="items" expanded="true">
               <rich:panelMenuItem label="item1">
                  <f:param name="current" value="item1"/>
                  <s:conversationPropagation type="none"/>
               </rich:panelMenuItem>
               <rich:panelMenuItem label="item2">
                  <f:param name="current" value="item2"/>
                  <s:conversationPropagation type="none"/>
               </rich:panelMenuItem>
               <rich:panelMenuItem label="item3">
                  <f:param name="current" value="item3"/>
                  <s:conversationPropagation type="none"/>
               </rich:panelMenuItem>

            </rich:panelMenuGroup>

         </rich:panelMenu>


      </h:form>
      <br/>
   </div>
   <div class="community-menu-footer"/>
</div>

<div class="community-about float-right" style="width:65%">

<rich:panel>

<a4j:outputPanel ajaxRendered="true">





<rich:dataTable onRowMouseOver="this.style.backgroundColor='#F1F1F1'" rendered="#{param.current == 'item1'}"
                onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
                cellpadding="0" cellspacing="0" width="100%" border="0" var="none" value="">

   <f:facet name="header">
      <rich:columnGroup>
         <rich:column colspan="2">
            <div class="float-left half-width align-left">
               <h3>item1</h3>

            </div>
            <div class="float-right half-width">
               <rich:subTable
                     onRowMouseOver="this.style.backgroundColor='#F8F8F8'"
                     onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'" var="traddnsactions"
                     value="">
                  <rich:column colspan="2">
                        item1
                     </rich:column>

                  <rich:columnGroup>

                     <rich:column>
                        <h3 class="bold-black">item</h3>
                     </rich:column>
                     <rich:column styleClass="yellow">
                        <h3 class="bold-black">item</h3>
                     </rich:column>
                  </rich:columnGroup>
                  <rich:columnGroup>

                     <rich:column>
                        <h3 class="bold-black">item</h3>
                     </rich:column>
                     <rich:column styleClass="green">
                        <h3 class="bold-black">item</h3>
                     </rich:column>
                  </rich:columnGroup>
                  <rich:columnGroup>

                     <rich:column>
                        <h3 class="bold-black">item</h3>
                     </rich:column>
                     <rich:column styleClass="blue">
                        <h3 class="bold-black">item</h3>
                     </rich:column>
                  </rich:columnGroup>
               </rich:subTable>
            </div>
         </rich:column>
         <rich:column breakBefore="true">

           <h3> <h:outputText value="item"/></h3>

         </rich:column>

         <rich:column>

           <h3> <h:outputText value="item"/></h3>

         </rich:column>


      </rich:columnGroup>
   </f:facet>

   <rich:column colspan="2" style="background-color:#ececec">
      <h3 class="bold-black">item</h3>
   </rich:column>
   <rich:columnGroup>
      <rich:column>
         item
      </rich:column>
      <rich:column styleClass="blue">
         item
      </rich:column>
   </rich:columnGroup>
   <rich:columnGroup>
      <rich:column>
         item
      </rich:column>
      <rich:column styleClass="blue">
         item
      </rich:column>
   </rich:columnGroup>
   <rich:columnGroup>
      <rich:column>
         item
      </rich:column>
      <rich:column styleClass="blue">
         item
      </rich:column>
   </rich:columnGroup>


</rich:dataTable>


</a4j:outputPanel>
</rich:panel>

 </div>


</ui:composition>
